<template>
  <div class="ne-edit-table">
    <el-form ref="LTtb" :model="LTtbs">
      <table border="1" cellspacing=0 cellpadding=1 bordercolor=#dcdfe6>
      <thead>
      <tr>
        <th v-for="(item,index) in LTtbs.tableColumns" :key="index">
          <div v-if="item.slotName=='btn'">
            <el-button :disabled="LTtbs.tableData.length>=3 || $attrs.isSureScheme" type="primary" @click="addOuterFun" class="ne-opt-btn" icon="el-icon-plus"></el-button>
          </div>
          <div v-else>
            <span v-if="item.required" class="ne-red">*</span>{{ item.title }}
          </div>
        </th>
      </tr>
      </thead>
      <tbody>
        <tr v-for="(trda,index) in LTtbs.tableData" :key="index">
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field1.OVERSEAS.value'" :rules="LTtbs.rules.OVERSEAS">
                <el-input v-model="trda.field1.OVERSEAS.value" clearable></el-input>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field2.OVERSEAS_OPP_ID.value'" :rules="LTtbs.rules.OVERSEAS_OPP_ID">
                <el-select class="ne-max-input" v-model="trda.field2.OVERSEAS_OPP_ID.value" clearable filterable placeholder="请选择">
                  <el-option
                      v-for="item in trda.field2.OVERSEAS_OPP_ID.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field3.OVERSEAS_RES_TYPE.value'" :rules="LTtbs.rules.OVERSEAS_RES_TYPE">
                <el-select v-model="trda.field3.OVERSEAS_RES_TYPE.value" placeholder="请选择">
                  <el-option
                      v-for="item in trda.field3.OVERSEAS_RES_TYPE.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field4.OVERSEAS_TIME.value'" :rules="LTtbs.rules.OVERSEAS_TIME">
                <el-input v-model="trda.field4.OVERSEAS_TIME.value"></el-input>
              </el-form-item>
              <p>工作日</p>
            </div>
          </td>
          <td>
            <div class="flex">
              <input-down v-model="trda.field5.MONEY_MONTH.value">
                <side-select :options="trda.field5.MONEY_MONTH.opts.options" v-model="trda.field5.MONEY_MONTH.opts.value"></side-select>
              </input-down>
            </div>
          </td>
          <td>
            <div class="flex">
              <input-down v-model="trda.field6.MONEY_SETUP.value">
                <side-select :options="trda.field6.MONEY_SETUP.opts.options" v-model="trda.field6.MONEY_SETUP.opts.value"></side-select>
              </input-down>
            </div>
          </td>
          <td>
            <div class="flex">
              <input-down v-model="trda.field7.MONEY_BUILDING.value">
                <side-select :options="trda.field7.MONEY_BUILDING.opts.options" v-model="trda.field7.MONEY_BUILDING.opts.value"></side-select>
              </input-down>
            </div>
          </td>
          <td>
            <div class="flex">
              <input-down v-model="trda.field8.MONEY_EQU.value">
                <side-select :options="trda.field8.MONEY_EQU.opts.options" v-model="trda.field8.MONEY_EQU.opts.value"></side-select>
              </input-down>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field9.TIME_DELAY.value'" :rules="LTtbs.rules.TIME_DELAY">
                <el-input v-model="trda.field9.TIME_DELAY.value"></el-input>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field10.USE_PERCENT.value'" :rules="LTtbs.rules.USE_PERCENT">
                <el-input v-model="trda.field10.USE_PERCENT.value"></el-input>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field11.DITHER.value'" :rules="LTtbs.rules.DITHER">
                <el-input v-model="trda.field11.DITHER.value"></el-input>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex ne-two">
              <el-form-item label="" :prop="'tableData['+index+'].field12.ADDR_START.value'" :rules="LTtbs.rules.ADDR_START">
               <el-input v-model="trda.field12.ADDR_START.value"></el-input>
              </el-form-item>
              <el-form-item label="" :prop="'tableData['+index+'].field12.ADDR_END.value'" :rules="LTtbs.rules.ADDR_END">
               <el-input v-model="trda.field12.ADDR_END.value"></el-input>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field13.ROUTE.value'" :rules="LTtbs.rules.ROUTE">
                <el-input type="textarea" v-model="trda.field13.ROUTE.value"></el-input>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field14.PROTECTED_MODE.value'" :rules="LTtbs.rules.PROTECTED_MODE">
                <el-select v-model="trda.field14.PROTECTED_MODE.value" placeholder="请选择">
                  <el-option
                      v-for="item in trda.field14.PROTECTED_MODE.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-form-item label="" :prop="'tableData['+index+'].field15.BUY_EQU_FLAG.value'" :rules="LTtbs.rules.BUY_EQU_FLAG">
                <el-select v-model="trda.field15.BUY_EQU_FLAG.value" placeholder="请选择">
                  <el-option
                      v-for="item in trda.field15.BUY_EQU_FLAG.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </td>
          <td>
            <div class="flex">
              <el-button type="danger" :disabled="$attrs.isSureScheme" @click="OutDeleteRow(index)" class="ne-opt-btn" icon="el-icon-delete"></el-button>
            </div>
          </td>
        </tr>
        <tr v-if="LTtbs.tableData.length<=0">
          <td colspan="15" style="text-align: center;padding: .1rem;color: #666;">暂无数据</td>
        </tr>
      </tbody>
    </table>
    </el-form>
  </div>
</template>
<script>
import InputDown from "@/components/public/forms/InputDown";
import SideSelect from "@/components/public/forms/InputDown/SideSelect.vue";
export default {
  name: "LocalTable",
  data() {
    return {

    }
  },
  props: {
    LTtbs:{
      type:Object
    },
  },
  mounted() {

  },
  created() {

  },
  components: {InputDown,SideSelect},
  methods: {
    addOuterFun(){
      this.LTtbs.tableData.push(JSON.parse(JSON.stringify(this.LTtbs.init)));
    },
    OutDeleteRow(index){
      this.$confirm('此操作将删除此条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.LTtbs.tableData.splice(index,1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.ne-edit-table{
  ::v-deep .el-form-item{
    margin: 0;
    padding: 0;
  }
  ::v-deep .el-form-item__content{
    margin: 0!important;
  }
  table{
    margin-bottom: .1rem;
    width: 100%;
    border-collapse:collapse;
    border-spacing:0;
    th{
      font-weight: 550;
      padding:.05rem;
      div{
        font-size: $fontSize_sm!important;
      }
    }
    .ne-opt-btn{
      padding: 0;
      text-align: center;
      width: .25rem;
      height: .25rem;
      line-height: .23rem;
      min-height: auto;
      border-radius: 50%;
      ::v-deep i{
        font-size: .13rem;
      }
    }
    thead{
      background-color: #F2F2F2;
    }
    //border: 1px solid #dddddd;
    td{
      padding:.05rem;
      p,span{
        font-size:$fontSize_sm;
        white-space:nowrap;
      };
      div{
        &:nth-child(2){
          margin-left: .05rem;
        }
      }
      ::v-deep input{
        //width: .5rem;
        border-radius: .03rem;
        padding: 0 .05rem;
        height: .35rem;
        line-height: .35rem;
        font-size: $fontSize_sm;
      }
      ::v-deep .el-input__icon{
        line-height: .35rem;
      }
      .ne-two{
        //max-width: 2.5rem;
      }
      .ne-max-input{
        width: 1.7rem;
      }
    }
  }
}
</style>
